<template>
  <div id="addScoringResultPage">
    <h2 style="margin-bottom: 32px">设置评分</h2>
    <a-form
            :model="form"
            :style="{ width: '480px' }"
            label-align="left"
            auto-label-width
            @submit="handleSubmit"
    >
      <a-form-item label="应用 id">
        {{ appId }}
      </a-form-item>
      <a-form-item v-if="updateId" label="修改评分 id">
        {{ updateId }}
      </a-form-item>
      <a-form-item field="resultName" label="结果名称">
        <a-input v-model="form.resultName" placeholder="请输入结果名称" />
      </a-form-item>
      <a-form-item field="resultDesc" label="结果描述">
        <a-input v-model="form.resultDesc" placeholder="请输入结果描述" />
      </a-form-item>
      <a-form-item field="resultPicture" label="结果图标">
        <a-input
                v-model="form.resultPicture"
                placeholder="请输入结果图标地址"
        />
      </a-form-item>
      <a-form-item field="resultProp" label="结果集">
        <a-input-tag
                v-model="form.resultProp"
                :style="{ width: '320px' }"
                placeholder="请输出结果集，按回车确认"
                allow-clear
        />
      </a-form-item>
      <a-form-item field="resultScoreRange" label="结果得分范围">
        <a-input-number
                v-model="form.resultScoreRange"
                placeholder="请输入结果得分范围"
        />
      </a-form-item>
      <a-form-item>
        <a-space size="large">
          <a-button type="primary" html-type="submit" style="width: 120px">
            提交
          </a-button>
          <a-button type="primary" @click="doClrean" style="width: 120px">
            清空
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <h2 style="margin-bottom: 32px">评分管理</h2>
    <!--下面ref属性是接收子组件暴露的函数-->
    <ScoringResultTable :appId="appId" :doUpdate="doUpdate" ref="tableRef" />
  </div>
</template>

<script setup lang="ts">
  import {reactive, ref, watchEffect} from 'vue';
  import {userLoginUsingPost} from "@/api/userController";
  import {useLoginUserStore} from "@/store/userStore";
  import message from "@arco-design/web-vue/es/message"
  import {useRouter} from "vue-router";
  import {createAppUsingPost, editAppUsingPost, getAppByIdUsingGet} from "@/api/appController";
  import {APPTYPE_MAP,SCORINGTYPE_MAP} from '@/constant/enum';
  import ScoringResultTable from '@/views/add/component/ScoringResultTable'
  import {
    addScoringResultUsingPost,
    editScoringResultUsingPost,
    getScoringResultVoByIdUsingGet,
    listScoringResultVoByPageUsingPost
  } from "@/api/scoringResultController";

  const loginUserStore = useLoginUserStore();
  const router = useRouter();

  //定义创建应用所需的变量
  const form = ref({
    resultDesc: '',
    resultPicture: 'https://th.bing.com/th/id/OIP.gBvHXYM7nl4RUaLjHKroUwHaHa?rs=1&pid=ImgDetMain',
    resultName: '',
  } as API.ScoringResultAddRequest);

  //获取前页面跳转过来的参数
  interface Props {
    appId:string
  }
  const props = withDefaults(defineProps<Props>(),{
    appId:() =>{
      return "";
    }
  })

  //用于区分修改还是创建（不为空则是更新，空则是创建）
  const updateId = ref<any>();

  //获取子组件表格传来的评分结果，回显到表单中
  const doUpdate = (scoringResult:API.ScoringResultVO) =>{
    updateId.value = scoringResult.id;
    form.value = scoringResult;
  }

  //获取子组件所暴露的函数。
  const tableRef = ref();

  //提交
  const handleSubmit = async () => {
    //如果是修改
    if(!props.appId){
      return;
    }
    let res : any
    if(updateId.value){
      res = await editScoringResultUsingPost({
        id:props.appId as any,
        ...form.value
      });
    }
    //创建
    else {
      res = await addScoringResultUsingPost({
        appId:props.appId as any,
        ...form.value
      });
    }
    if (res.data.code === 0) {
      message.success("操作成功")
    } else {
      message.error("操作失败" + res.data.message);
    }
    if(tableRef){
      //刷新表格数据
      tableRef.value.loadData();
      //清空更新id
      updateId.value = undefined;
    }
  };

  const doClrean = () =>{
    updateId.value = null;
    form.value.resultDesc = '';
    form.value.resultPicture = 'https://th.bing.com/th/id/OIP.gBvHXYM7nl4RUaLjHKroUwHaHa?rs=1&pid=ImgDetMain';
    form.value.resultName = '';
    form.value.resultProp = [];
    form.value.resultScoreRange = 0;
  }
</script>